<template>
  <div class="history">
    <p>
        <span>历史记录</span>
        <span style="color:red" @click="$store.commit('delectAll')">全部删除</span>
    </p>
    <ul>
        <!-- &#x3000; 中文的空格 -->
        <li v-for="(item,index) in $store.state.history" :key="index" @click="$emit('itemClick',item)">
            {{item}}&#x3000;<i @click.stop="$store.commit('delect',index)">X</i>
        </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {},
};
</script>
<style lang="scss" scoped>
.history{
    padding: 0 10px;
    p{
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
ul{
  display: flex;
  flex-wrap: wrap;
  li{
      padding: 4px 8px;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-right: 10px;
  }
}
</style>